<template>
  <div class="category-detail">
    <!-- 分类头部 -->
    <div class="category-header">
      <div class="container">
        <div class="header-content">
          <div class="category-info">
            <h1 class="category-title">{{ categoryData.name }}</h1>
            <p class="category-description">{{ categoryData.description }}</p>
            <div class="category-stats">
              <span>
                <el-icon><video-camera /></el-icon>
                {{ categoryData.videoCount }} 个视频
              </span>
              <span>
                <el-icon><view /></el-icon>
                {{ categoryData.totalViews }} 次观看
              </span>
              <span>
                <el-icon><star /></el-icon>
                {{ categoryData.totalLikes }} 次点赞
              </span>
            </div>
          </div>
          <div class="category-image">
            <img :src="categoryData.image" :alt="categoryData.name">
            <div class="image-overlay"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="container">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <el-form-item label="排序">
            <el-select v-model="filterForm.sort" placeholder="选择排序方式">
              <el-option label="最新发布" value="latest" />
              <el-option label="最多观看" value="most-viewed" />
              <el-option label="最多点赞" value="most-liked" />
            </el-select>
          </el-form-item>
          <el-form-item label="时长">
            <el-select v-model="filterForm.duration" placeholder="选择时长">
              <el-option label="全部" value="" />
              <el-option label="0-5分钟" value="0-5" />
              <el-option label="5-15分钟" value="5-15" />
              <el-option label="15-30分钟" value="15-30" />
              <el-option label="30分钟以上" value="30+" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 视频列表 -->
    <div class="videos-section">
      <div class="container">
        <div class="videos-grid">
          <video-card
            v-for="video in videos"
            :key="video.id"
            :video="video"
            @click="navigateToVideo(video.id)"
          />
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[12, 24, 36, 48]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 热门标签 -->
    <div class="tags-section">
      <div class="container">
        <h2 class="section-title">热门标签</h2>
        <div class="tags-cloud">
          <el-tag
            v-for="tag in popularTags"
            :key="tag.name"
            :type="tag.type"
            class="tag"
            @click="handleTagClick(tag.name)"
          >
            {{ tag.name }}
            <span class="tag-count">({{ tag.count }})</span>
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  VideoCamera,
  View,
  Star
} from '@element-plus/icons-vue'
import VideoCard from '@/components/VideoCard.vue'
import { gsap } from 'gsap'

const route = useRoute()
const router = useRouter()
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(100)

const filterForm = reactive({
  sort: 'latest',
  duration: ''
})

const categoryData = ref({
  id: 1,
  name: '乡村生活',
  description: '记录最真实的乡村生活，感受自然与人文的完美融合。这里汇集了来自全国各地的乡村生活视频，展现不同地区的乡村特色和文化。',
  image: '/images/categories/rural-life.jpg',
  videoCount: 128,
  totalViews: '1.2M',
  totalLikes: '45.6k'
})

const videos = ref([
  {
    id: 1,
    title: '春日田园风光',
    thumbnail: '/images/videos/spring-countryside.jpg',
    duration: '3:45',
    views: '12.5k',
    author: '乡村摄影师',
    tags: ['春天', '田园', '风光']
  },
  // ... 更多视频数据
])

const popularTags = ref([
  { name: '乡村生活', count: 128, type: 'primary' },
  { name: '田园风光', count: 96, type: 'success' },
  { name: '农家美食', count: 75, type: 'warning' },
  { name: '农耕文化', count: 64, type: 'info' },
  { name: '乡村手工艺', count: 48, type: 'danger' },
  { name: '乡村音乐', count: 36, type: '' }
])

const handleSearch = () => {
  // 实现搜索逻辑
  currentPage.value = 1
  fetchVideos()
}

const resetFilter = () => {
  filterForm.sort = 'latest'
  filterForm.duration = ''
  handleSearch()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchVideos()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchVideos()
}

const navigateToVideo = (videoId) => {
  router.push(`/video/${videoId}`)
}

const handleTagClick = (tagName) => {
  // 实现标签点击逻辑
}

const fetchVideos = () => {
  // 实现获取视频列表的逻辑
}

onMounted(() => {
  fetchVideos()

  // 添加页面动画
  gsap.from('.category-title', {
    duration: 1,
    y: 30,
    opacity: 0,
    ease: 'power3.out'
  })

  gsap.from('.category-description', {
    duration: 1,
    y: 20,
    opacity: 0,
    delay: 0.3,
    ease: 'power3.out'
  })

  gsap.from('.category-stats span', {
    duration: 0.8,
    y: 20,
    opacity: 0,
    stagger: 0.2,
    delay: 0.6,
    ease: 'power3.out'
  })

  gsap.from('.category-image', {
    duration: 1,
    x: 50,
    opacity: 0,
    delay: 0.9,
    ease: 'power3.out'
  })

  gsap.from('.filter-form', {
    duration: 0.8,
    y: 20,
    opacity: 0,
    delay: 1.2,
    ease: 'power3.out'
  })

  gsap.from('.videos-grid > *', {
    duration: 0.8,
    y: 30,
    opacity: 0,
    stagger: 0.1,
    scrollTrigger: {
      trigger: '.videos-grid',
      start: 'top center+=100'
    }
  })

  gsap.from('.tag', {
    duration: 0.5,
    scale: 0.8,
    opacity: 0,
    stagger: 0.1,
    scrollTrigger: {
      trigger: '.tags-cloud',
      start: 'top center+=100'
    }
  })
})
</script>

<style lang="scss" scoped>
.category-detail {
  .category-header {
    background: linear-gradient(135deg, var(--grass-green) 0%, var(--sky-blue) 100%);
    padding: 4rem 0;
    color: white;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('@/assets/images/patterns/rustic-pattern.png') repeat;
      opacity: 0.1;
    }

    .header-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    .category-info {
      position: relative;
      z-index: 1;

      .category-title {
        font-size: 3rem;
        margin-bottom: 1rem;
      }

      .category-description {
        font-size: 1.1rem;
        margin-bottom: 2rem;
        opacity: 0.9;
        line-height: 1.6;
      }

      .category-stats {
        display: flex;
        gap: 2rem;

        span {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 1.1rem;

          .el-icon {
            font-size: 1.3rem;
          }
        }
      }
    }

    .category-image {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);

      img {
        width: 100%;
        height: 300px;
        object-fit: cover;
      }

      .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(0, 0, 0, 0.3)
        );
      }
    }
  }

  .filter-section {
    background: white;
    padding: 2rem 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;

    .filter-form {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }
  }

  .videos-section {
    padding: 4rem 0;
    background: var(--background-light);

    .videos-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .pagination {
      display: flex;
      justify-content: center;
    }
  }

  .tags-section {
    padding: 4rem 0;
    background: white;

    .section-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 3rem;
      color: var(--text-primary);
      position: relative;
      display: inline-block;

      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: var(--primary-color);
        border-radius: var(--radius-full);
      }
    }

    .tags-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;

      .tag {
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0.5rem 1rem;
        font-size: 1.1rem;

        &:hover {
          transform: translateY(-2px);
        }

        .tag-count {
          margin-left: 0.5rem;
          opacity: 0.8;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .category-detail {
    .category-header {
      padding: 3rem 0;

      .category-info {
        .category-title {
          font-size: 2rem;
        }

        .category-description {
          font-size: 1rem;
        }

        .category-stats {
          flex-wrap: wrap;
          gap: 1rem;

          span {
            font-size: 1rem;
          }
        }
      }
    }

    .filter-section {
      padding: 1rem 0;

      .filter-form {
        flex-direction: column;
        align-items: stretch;

        .el-form-item {
          margin-right: 0;
          margin-bottom: 1rem;
        }
      }
    }

    .videos-section,
    .tags-section {
      padding: 2rem 0;
    }
  }
}
</style> 